<!DOCTYPE html>
<html>

<!-- 行内文字高度不同，导致对不齐，常出现于文字和图标并排 -->
<head>
    <meta charset="utf-8">
    <title>行内文字高度不同，导致对不齐</title>
    <style>

        p{
            background-color: cadetblue;
        }

        .p1{
            font-size: 12px;
            position: relative;
        }
        .p1 .s1{
            font-size: 16px;
            color: red;
            position: absolute;
            top: -3px;
            left: auto; /*重点：默认为auto，会自动计算左边缘的位置，留出'测试文字'的距离，厉害！*/
        }

        .p2{
            font-size: 12px;
        }
        .p2 .s2{
            font-size: 16px;
            color: red;
            position: relative;
            top: 2px;
        }

        .p3{
            font-size: 12px;
        }
        .p3 .s3{
            font-size: 16px;
            color: red;
            display: inline-block;
            transform: translateY(2px);
        }

        .p4{
            font-size: 12px;
        }
        .p4 .s4{
            font-size: 16px;
            color: red;
            vertical-align: middle;/*这种方式效果不太好*/
        }

        .arrow{
            border: 10px solid red;
            width: 0;
            height: 0;
        }

    </style>
</head>

<body>

    <div class="arrow"></div>

    <p class="p1">
        测试文字<span class="s1">大文字</span>
    </p>

    <p class="p2">
        测试文字<span class="s2">大文字</span>
    </p>

    <p class="p3">
        测试文字<span class="s3">大文字</span>
    </p>

    <p class="p4">
        测试文字<span class="s4">大文字</span>
    </p>

</body>

</html>